<template>
  <div class="home">
    <el-text class="mx-1">我是一个小巧的百宝箱，内置了一些常用的小工具~</el-text>
    <el-divider style="margin: 16px 0;">工具集合</el-divider>
    <div class="home-scroll-wrap">
      <div class="home-items">
      <button class="home-items-item" v-for="item in comps"
              :class="item.meta.isInside ? 'inside' : ''"
              :disabled="btnFlag"
              :title="item.meta.isInside ? '\n注意：内部软件，只有公司内网才可以使用！\n' +  item.meta.desc : item.meta.desc"
              :key="item.name" @click="onItemClick(item)">
        <el-icon v-if="item.meta.isInside" class="inner-tag">
          <WarnTriangleFilled/>
        </el-icon>
        <el-text truncated style="color: #fff">{{ item.meta.cnName || item.name }}</el-text>
      </button>
    </div>
    </div>
  </div>
</template>
<script lang="ts">
import components from '@/router/components'
import {ref} from 'vue';
import {useRouter} from 'vue-router';

export default {
  name: 'HomeIndex',
  setup() {
    const router = useRouter()
    const comps = components
    let btnFlag = ref(false)
    const onItemClick = (item: any) => {
      btnFlag.value = true
      setTimeout(() => {
        if (item.meta.url) {
          window.open(item.meta.url)
          return
        }
        router.replace({
          name: item.name
        })
      }, 500)
    }
    return {
      comps,
      onItemClick,
      btnFlag
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .home-scroll-wrap {
    height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .home-items {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 75px);
    grid-gap: 16px;
    &:after {
      content: '开发中...';
      display: block;
      width: 75px;
      line-height: 95px;
      font-size: 12px;
      color: #909399;
    }

    &-item {
      margin-top: 10px;
      padding: 5px;
      width: 75px;
      height: 75px;
      overflow: hidden;
      border-radius: 10px;
      outline: 0;
      border: 0;
      color: #fff;
      cursor: pointer;
      position: relative;
      background-color: #1976d2;
      box-shadow: var(--el-box-shadow-lighter);
      /* 背景渐变色 - 原理2 */
      background: linear-gradient(-45deg, #437fa3, #499ec1, #23a6d5, #847f9e);
      /* 背景尺寸 - 原理3 */
      background-size: 600% 600%;
      /* 循环动画 - 原理4 */
      animation: gradientBG 5s ease infinite;

      &:hover {
        transform: rotate(10deg);
        transition: all 0.4s;
      }

      .inner-tag {
        display: block;
        font-size: 20px;
        color: #e6a23c;
        position: absolute;
        top: 0;
        right: 0;
      }

      &.inside {
        /* 背景渐变色 - 原理2 */
        //background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-image: -webkit-linear-gradient(left, #eccbc3,
            #437fa3 20%, #499ec1 40%,
            #23a6d5 60%, #847f9e 100%);
      }
    }
    /* 动画，控制背景 background-position */
    @keyframes gradientBG {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  }
}
</style>
